import React from 'react';
import { Row, Input,Button,Divider,Select,Checkbox,List   } from 'antd';
import AddTransport from './AddTransport'
import {huoZhongList,diDianClassList,huoZhuList,transportList} from '../../redux/transportClass/transportClass'
import {jhstart,end,cjTer,recovery} from '../../redux/transportClass/transportDateils'
import './index.css'
import TranspotDetail from './TranspotDetail'
import { connect } from 'react-redux'
import  AddChuangbo  from './AddChuangbo'

const Option = Select.Option;

@connect(
    state => state,
    {huoZhongList,diDianClassList,huoZhuList,transportList,jhstart,end,cjTer,recovery}
)
export default class Transport extends React.Component{
    constructor(){
        super();
        this.state = {
            visible:false,
            id:'1',
            showDateils:false,
            showDateils1:false,
            isCz:false,
            check:false,
            caozuoId:'1'
        }
    }
    componentWillReceiveProps(nextProps){
            if(nextProps.transport.addCJ){
                this.setState({
                    visible:false
                },()=>{
                    this.props.transportList('1');
                }
                )
               
            }
    }
    componentDidMount(){
       this.props.transportList('1');
       this.setState({
           isCz:false
       })
    }
     handleChange(value) {
        console.log(`selected ${value}`);
      }
      AddModel(){
          this.setState({
              visible:true
          })
          this.props.huoZhongList();
          this.props.huoZhuList();
          this.props.diDianClassList();
      }
      
      showModel(){
          this.setState({
              visible:!this.state.visible
          })
      }
      addCb(){
        this.setState({
            showDateils1:true
        })
      }
      jhstarts(){
        this.props.jhstart1(this.state.caozuoId)
      }
      ends(){
        this.props.cjTer(this.state.caozuoId)
      }
      stops(){
        this.props.ends(this.state.caozuoId)
      }
      addCb2(){
        this.setState({
            showDateils:true,
            showDateils1:false
        })
      }
      onChange(id,e){
         if(e.target.checked){
             this.setState({
                check:e.target.checked,
                caozuoId:id
             })
              
         }
      }
      quxiao(){
          this.setState({
              isCz:false
          })
      }
      caozuo(){
          if(this.state.check){
                this.setState({
                    isCz:true
                })
          }
         
      }
      tsDateils(id){
            this.setState({
                id:id,
                showDateils:true,
                showDateils1:false
            })
      }
    render() {
        console.log(this.state.isCz)
        let queryList = this.props.transport.queryList
        console.log(queryList)
        return (
            <div>
            <div style={{overflow:'hidden'}}>
            <div className='transport'>
                <Button onClick = {this.AddModel.bind(this)} className='updateBtn'>创建计划</Button>
                <Divider />
                <Select  defaultValue="lucy" style={{ width: 120,marginLeft:'5%' }} onChange={this.handleChange}>
                    <Option value="jack">Jack</Option>
                    <Option value="lucy">Lucy</Option>
                    <Option value="disabled" disabled>Disabled</Option>
                    <Option value="Yiminghe">yiminghe</Option>
                </Select>
                <div className="operation" onClick={this.caozuo.bind(this)}>操作</div>
                <div className='divides_margin'>
                <Divider />
                </div>
                <div >
                <List
                    itemLayout="horizontal"
                    dataSource={!queryList ?'' :queryList}
                    renderItem={item => (
                    <List.Item>
                        <List.Item.Meta
                        avatar={<div style={{marginLeft:'100%'}} className='check'>
                                    <Checkbox onChange={this.onChange.bind(this,item.id)}/>
                                    </div>
                                }
                            description={
                                <div onClick={this.tsDateils.bind(this,item.id)} style={{marginLeft:'5%'}}>
                                    <div className="fontColor">{item.planName}</div>
                                    <div className="fontColor">{item.huoZhuName}&nbsp;&nbsp;&nbsp;&nbsp;{item.planEndDate.split(' ')[0]+'-'+item.planStartDate.split(' ')[0]}</div>
                                    <div className="fontColor">{item.originalName+'--'+item.destinationName}&nbsp;&nbsp;&nbsp;&nbsp;{item.goodsName}&nbsp;&nbsp;&nbsp;&nbsp;{item.planTonnage+'吨'}</div>
                                </div>
                            }
                        />
                    </List.Item>
                    )}
                />   
                <AddTransport visible = {this.state.visible} showModel = {this.showModel.bind(this)}/>
                </div>
            </div>
            <div className = 'transpotDetail'>
              {
                  this.state.showDateils ?  this.state.showDateils1 ? <AddChuangbo addCb2={this.addCb2.bind(this)} id={this.state.id}/> : <TranspotDetail  addCb={this.addCb.bind(this)} id={this.state.id}/> :''
              }
               
            </div>
            
            </div>
            <div style={{widthMax:'1920px',widthMin:'1200px', width:'1685px',lineHeight:'80px', height:'80px',backgroundColor:'#f0f0f0',position:'fixed',bottom:'0',left:'0',zIndex:'999999',display:this.state.isCz?'block':'none'}}>
                    <Checkbox style={{marginLeft:'230px'}}/> <span>已选</span>
                    <Button onClick={ this.jhstarts.bind(this) } style={{marginLeft:'80px'}}>开始计划</Button>
                    <Button onClick={this.ends.bind(this) } style={{marginLeft:'30px'}}>终止计划</Button>
                    <Button onClick={this.stops.bind(this) } style={{marginLeft:'30px'}}>完成计划</Button>
                    <Button style={{marginLeft:'30px'}}>分类标签</Button>
                    <span onClick={this.quxiao.bind(this)} style={{marginLeft:'80px'}}>取消</span>
                </div>
            </div>
        )
    }
}   